<!-- 备件管理-备件盘点页面 -->
<template>
  <div>
    <div v-show="isMain" class="equip-wrap-common">
      <px-form class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px">
        <px-row :gutter="16">
          <px-col :span="6">
            <px-form-item label="盘点名称/编码">
              <px-input
                v-model="queryParams.takeNameOrCode"
                placeholder="请输入盘点名称/编码"
                maxlength="50"
                clearable
                @blur="queryParams.takeNameOrCode = $event.target.value.trim()"
                @keyup.enter="queryTable"
              >
                <template #suffix>
                  <px-icon style="cursor: pointer" @click="queryTable">
                    <search />
                  </px-icon>
                </template>
              </px-input>
            </px-form-item>
          </px-col>
          <px-col :span="6">
            <EquipClassSelect :className="queryParams.className" @changeClassName="changeClassName" />
          </px-col>
          <px-col :span="12" class="form-date-class">
            <px-form-item label="日期" prop="planStartDate" style="width: 52%">
              <px-date-picker
                v-model="queryParams.planStartDate"
                type="date"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                placeholder="开始日期"
                @change="changePlanStartDate"
              />
            </px-form-item>
            <span>-</span>
            <px-form-item label="" prop="planEndDate" style="width: calc(48% - 20px)">
              <px-date-picker
                v-model="queryParams.planEndDate"
                type="date"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                placeholder="结束日期"
                @change="changePlanEndDate"
              />
            </px-form-item>
          </px-col>
          <px-col :span="6">
            <px-form-item label="执行状态">
              <px-select v-model="queryParams.executeStatus" placeholder="请选择执行状态" filterable clearable>
                <px-option v-for="(item, index) in executeStatusList" :key="index" :label="item.name" :value="item.value" />
              </px-select>
            </px-form-item>
          </px-col>
          <px-col :span="6">
            <px-button type="primary" @click="queryTable">查询</px-button>
            <px-button @click="resetTable">重置</px-button>
          </px-col>
        </px-row>
      </px-form>
      <div class="equip-table-btn">
        <px-button v-has="'ALL_EQUIP_SPAREPARTS_INVENTORY_ADD'" type="primary" @click="addSpareParts">新增</px-button>
      </div>
      <px-table :data="tableData" class="equip-table" size="small" height="calc(100vh - 346px)" border>
        <px-table-column label="序号" width="80" align="center" fixed="left">
          <template #default="{ $index }">
            {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
          </template>
        </px-table-column>
        <px-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope">
            <px-button
              v-if="item.takeStockCode && showRowText('ALL_EQUIP_SPAREPARTS_INVENTORY_VIEW')"
              link
              type="primary"
              @click="handleView(scope.row)"
            >
              {{ scope.row.takeStockCode }}
            </px-button>
            <span v-else-if="item.takeStockCode && !showRowText('ALL_EQUIP_SPAREPARTS_INVENTORY_VIEW')">{{ scope.row.takeStockCode }}</span>
            <span v-else>{{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}</span>
          </template>
        </px-table-column>
        <px-table-column prop="executeStatusDesc" label="执行状态" min-width="140" align="center" show-overflow-tooltip>
          <template #default="scope">
            <div v-if="scope.row.executeStatus === 0" style="display: flex; align-items: center; justify-content: center; color: #dedfe0">
              <div style="width: 8px; height: 8px; margin-right: 8px; background: #dedfe0; border-radius: 8px" />
              {{ scope.row.executeStatusDesc }}
            </div>
            <div v-else-if="scope.row.executeStatus === 1" style="display: flex; align-items: center; justify-content: center; color: #f59e0b">
              <div style="width: 8px; height: 8px; margin-right: 8px; background: #f59e0b; border-radius: 8px" />
              {{ scope.row.executeStatusDesc }}
            </div>
            <div v-else-if="scope.row.executeStatus === 2" style="display: flex; align-items: center; justify-content: center; color: #10b981">
              <div style="width: 8px; height: 8px; margin-right: 8px; background: #10b981; border-radius: 8px" />
              {{ scope.row.executeStatusDesc }}
            </div>
            <div v-else-if="scope.row.executeStatus === 3" style="display: flex; align-items: center; justify-content: center; color: #3b82f6">
              <div style="width: 8px; height: 8px; margin-right: 8px; background: #3b82f6; border-radius: 8px" />
              {{ scope.row.executeStatusDesc }}
            </div>
            <div v-else-if="scope.row.executeStatus === 4" style="display: flex; align-items: center; justify-content: center; color: #f00">
              <div style="width: 8px; height: 8px; margin-right: 8px; background: #f00; border-radius: 8px" />
              {{ scope.row.executeStatusDesc }}
            </div>
            <div v-else>
              {{ scope.row.executeStatusDesc || "-" }}
            </div>
          </template>
        </px-table-column>
        <px-table-column prop="executeTime" label="执行时间" min-width="160" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.executeTime || "-" }}</template>
        </px-table-column>
        <px-table-column fixed="right" label="操作" width="200" align="center">
          <template #default="scope">
            <!-- 盘点报告 -->
            <px-tooltip v-if="scope.row.executeStatus === 3" content="盘点报告" placement="top">
              <px-button v-has="'ALL_EQUIP_SPAREPARTS_INVENTORY_REPORT'" link type="primary" icon="Report" @click="handleReport(scope.row)" />
            </px-tooltip>
            <!-- 盘点 -->
            <px-tooltip v-if="(scope.row.executeStatus === 1 && scope.row.isTake) || scope.row.executeStatus === 2" content="盘点" placement="top">
              <px-button
                v-has="'ALL_EQUIP_SPAREPARTS_INVENTORY_INVENTORY'"
                link
                type="primary"
                icon="BasicRecords"
                @click="handleInventory(scope.row)"
              />
            </px-tooltip>
            <!-- 详情 -->
            <px-tooltip
              v-if="scope.row.executeStatus === 0 || scope.row.executeStatus === 1 || scope.row.executeStatus === 2 || scope.row.executeStatus === 4"
              content="详情"
              placement="top"
            >
              <px-button v-has="'ALL_EQUIP_SPAREPARTS_INVENTORY_VIEW'" link type="primary" icon="Tickets" @click="handleView(scope.row)" />
            </px-tooltip>
            <!-- 编辑 -->
            <px-tooltip v-if="scope.row.executeStatus === 0 || scope.row.executeStatus === 1" content="编辑" placement="top">
              <px-button v-has="'ALL_EQUIP_SPAREPARTS_INVENTORY_EDIT'" link type="primary" icon="EditPen" @click="handleEdit(scope.row)" />
            </px-tooltip>
            <!-- 删除 -->
            <px-tooltip v-if="scope.row.executeStatus === 0 || scope.row.executeStatus === 1" content="删除" placement="top">
              <px-button v-has="'ALL_EQUIP_SPAREPARTS_INVENTORY_DELETE'" link type="danger" icon="Delete" @click="handleDelete(scope.row)" />
            </px-tooltip>
          </template>
        </px-table-column>
      </px-table>
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        class="equip-table-pagination"
        :total="total"
        @pagination="queryTable"
      />
    </div>
    <!-- 详情新增/编辑页面 -->
    <AddSparePartsDetail
      :isMain="isMain"
      :isView="isView"
      :isDraftVisible="isDraftVisible"
      :drawerType="drawerType"
      :sparePartsId="sparePartsId"
      @queryTable="queryTable"
      @backMainPage="backMainPage"
    />
    <!-- 详情查看页面 -->
    <ViewSparePartsDetail
      :isMain="isMain"
      :isView="isView"
      :isInventory="isInventory"
      :sparePartsId="sparePartsId"
      @queryTable="queryTable"
      @backMainPage="backMainPage"
    />
    <!-- 盘点报告页面 -->
    <ViewSparePartsReport :visible="visible" :sparePartsId="sparePartsId" @closeDialog="closeDialog" />
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "ALL_EQUIP_SPAREPARTS_INVENTORY"
});
import { deleteSparePartsTakeStock, querySparePartsTakeStock } from "@/api/equip/spareParts";
import EquipClassSelect from "@/views/all/equip/components/EquipClassSelect.vue";
import { PxMessage, PxMessageBox } from "px-ui";
import { onMounted, reactive, toRefs } from "vue";
import { showRowText } from "@/utils/pengxi";
import AddSparePartsDetail from "./components/AddSparePartsDetail.vue";
import ViewSparePartsDetail from "./components/ViewSparePartsDetail.vue";
import ViewSparePartsReport from "./components/ViewSparePartsReport.vue";

const state = reactive<any>({
  isMain: true, // 主页面true 详情页面false
  isView: true, // 查看true 新增/编辑false
  isInventory: false, // 盘点true，查看false
  executeStatusList: [
    { name: "全部", value: "" },
    { name: "未开始", value: 1 },
    { name: "执行中", value: 2 },
    { name: "已完成", value: 3 },
    { name: "逾期", value: 4 },
    { name: "草稿", value: 0 }
  ],
  queryParams: {
    takeNameOrCode: "",
    className: "",
    planStartDate: "",
    planEndDate: "",
    executeStatus: "",
    pageNum: 1,
    pageSize: 20
  },
  tableColumns: [
    { prop: "takeStockName", label: "名称", minWidth: "160", showOverflowTooltip: true },
    { prop: "takeStockCode", label: "编码", minWidth: "160", showOverflowTooltip: true, takeStockCode: true },
    { prop: "classNameDesc", label: "科室", minWidth: "140", showOverflowTooltip: true },
    { prop: "planDate", label: "计划日期", minWidth: "240", showOverflowTooltip: true },
    { prop: "takeStockPeopleName", label: "盘点人", minWidth: "140", showOverflowTooltip: true }
  ],
  tableData: [],
  total: 0,
  drawerType: "add",
  sparePartsId: "",
  visible: false,
  isDraftVisible: true
});
const {
  isMain,
  isView,
  isInventory,
  executeStatusList,
  queryParams,
  tableColumns,
  tableData,
  total,
  drawerType,
  sparePartsId,
  visible,
  isDraftVisible
} = toRefs(state);

// 进入页面时触发
onMounted(() => {
  queryTable();
});
// 获取计划日期开始
const changePlanStartDate = () => {
  if (queryParams.value.planStartDate && queryParams.value.planEndDate) {
    if (queryParams.value.planStartDate > queryParams.value.planEndDate) {
      queryParams.value.planEndDate = queryParams.value.planStartDate;
    }
  }
};
// 获取计划日期结束
const changePlanEndDate = () => {
  if (queryParams.value.planStartDate && queryParams.value.planEndDate) {
    if (queryParams.value.planStartDate > queryParams.value.planEndDate) {
      queryParams.value.planStartDate = queryParams.value.planEndDate;
    }
  }
};
// 查询备件列表
const queryTable = async () => {
  const params = JSON.parse(JSON.stringify(queryParams.value));
  if (!queryParams.value.planStartDate && !queryParams.value.planEndDate) {
    delete params.planStartDate;
    delete params.planEndDate;
  } else if (!queryParams.value.planStartDate && queryParams.value.planEndDate) {
    delete params.planStartDate;
  } else if (queryParams.value.planStartDate && !queryParams.value.planEndDate) {
    delete params.planEndDate;
  }
  const data = await querySparePartsTakeStock(params);
  data?.data.forEach(item => {
    item.planDate = item.planStartDate + " - " + item.planEndDate;
  });
  tableData.value = data?.data || [];
  total.value = data?.total;
};
// 重置筛选条件和备件列表
const resetTable = async () => {
  queryParams.value = {
    takeNameOrCode: "",
    className: "",
    planStartDate: "",
    planEndDate: "",
    executeStatus: "",
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize
  };
  queryTable();
};
// 盘点报告备件详情
const handleReport = (row: any) => {
  sparePartsId.value = row.id;
  visible.value = true;
};
// 盘点备件详情
const handleInventory = (row: any) => {
  sparePartsId.value = row.id;
  isMain.value = false;
  isView.value = true;
  isInventory.value = true;
};
// 查看盘点备件详情
const handleView = (row: any) => {
  sparePartsId.value = row.id;
  isMain.value = false;
  isView.value = true;
  isInventory.value = false;
};
// 添加盘点备件详情
const addSpareParts = () => {
  drawerType.value = "add";
  isMain.value = false;
  isView.value = false;
  isDraftVisible.value = true;
};
// 编辑盘点备件详情
const handleEdit = (row: any) => {
  drawerType.value = "edit";
  sparePartsId.value = row.id;
  isMain.value = false;
  isView.value = false;
  isDraftVisible.value = row.executeStatus === 1 ? false : true;
};
// 删除备件盘点
const handleDelete = async (row: any) => {
  PxMessageBox.confirm(`要删除当前备件盘点“${row.takeStockName}”吗？`, "提示", {
    confirmButtonText: "删除",
    confirmButtonClass: "px-button--danger",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      await deleteSparePartsTakeStock({ id: row.id });
      PxMessage.success("删除成功");
      queryTable();
    })
    .catch(() => {});
};
// 从新增/编辑、详情返回主页面
const backMainPage = () => {
  isMain.value = true;
};
// 从盘点报告返回主页面
const closeDialog = () => {
  visible.value = false;
};

// 外部封装好的组件
// 科室组件调用父组件
const changeClassName = val => {
  queryParams.value.className = val;
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");

.form-date-class {
  display: flex;

  .px-form-item {
    margin-right: 0;
  }

  :deep(.px-form-item__content) {
    margin-left: 0 !important;

    .px-input__wrapper {
      border-radius: 4px;
    }
  }

  span {
    width: 20px;
    margin-top: 5px;
    text-align: center;
  }
}
</style>
